<template>

    <div>
        <div class="header-sum-card">
            <Row :gutter="10" class="mt10">
                <Col class="mb10" :lg="24" :md="24" :sm="24" :xs="24">
                    <Card style="text-align: right">
                        <Button type="primary" icon="ios-add-circle-outline" @click="addLink()">添加</Button>
                    </Card>
                    <Table border :columns="linkHeadList" :data="linkList"></Table>
                </Col>
                <Modal
                        :title="title"
                        v-model="linkModel"
                        :closable="false"
                        @on-ok="editLink()"
                >
                    <p>
                        <Input v-model="link.title" placeholder="请输入超级链接的标题..." style="width: 100%"/>
                        <Input v-model="link.weight" placeholder="请输入超级链接的权值..." style="width: 100%"/>
                        <Input v-model="link.url" placeholder="请输入超级链接的URL..." style="width: 100%"/>
                    </p>

                </Modal>
                <!--                        分页导航栏-->
                <div style="text-align: center;margin-top: 10px;">

                    <Page v-show="this.totals===0?false:true" :total="totals" show-sizer @on-change="page"
                          @on-page-size-change="changePageSize" :page-size-opts="[8,16,24]" :page-size="8"/>
                </div>

            </Row>
        </div>
    </div>

</template>
<script>
    export default {
        data() {
            return {
                //超级链接列表表头
                linkHeadList: [
                    {
                        title: '编号',
                        align: 'center',
                        key: 'id',
                    },
                    {
                        title: '链接标题',
                        align: 'center',
                        key: 'title'
                    },
                    {
                        title: '链接权值',
                        align: 'center',
                        key: 'weight'
                    },
                    {
                        title: 'URL',
                        align: 'center',
                        key: 'url'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params)
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                //超级链接列表数据源
                linkList: [],
                //超级链接过度值
                link: {},

                //控制超级链接修改框的弹出
                linkModel: false,
                //弹出窗的标题
                title: '',
                //分页
                totals: 0,
            }
        },
        created() {
            this.getLinkList()
        },
        methods: {

            addLink() {
                this.title = '添加超级链接';
                this.linkModel = !this.linkModel;

            },
            //打开编辑页查询对应的超级链接信息
            async show(params) {
                this.title = "修改超级链接"
                this.linkModel = !this.linkModel;
                const {data: result} = await this.$http.get("getLinkeById/" + params.row.id)
                if (result.code === 200) {
                    this.link = result.data;
                }else {
                    this.$Message.error(result.message)

                }
            },
            //删除改超级链接信息
            async remove(params) {
                const {data: result} = await this.$http.get("deleteLinkById/" + params.row.id)
                if (result.code === 200) {
                    this.$Message.success(result.message)
                    location.reload()
                } else {
                    this.$Message.error(result.message)
                }


            },
            //获取超级链接列表
            async getLinkList() {
                const {data: result} = await this.$http.get("getLinkList/0/8")
                if (result.code === 200) {
                    this.linkList = result.data.content
                    this.totals = result.data.totalElements;
                    this.link = {};
                } else {
                    this.$Message.error(result.message)
                }
            },
            //修改超级链接的方法
            async editLink() {
                const {data: result} = await this.$http.post("saveLink", this.link)
                if (result.code === 200) {
                    this.$Message.success(result.message)
                    this.getLinkList()

                } else {
                    this.$Message.error(result.message)
                }

            },
            //分页方法
            async page(currentPage) {
                const {data: result} = await this.$http.get("getLinkList/" + (currentPage - 1) + "/8");
                if (result.code === 200) {
                    this.linkList = result.data.content;
                    this.totals = result.data.totalElements;
                }
            },
            //改变每页显示条数的方法
            async changePageSize(pageSize) {
                const {data: result} = await this.$http.get("getLinkList/0/" + pageSize);
                if (result.code === 200) {
                    this.linkList = result.data.content;
                    this.totals = result.data.totalElements;
                }
            },
        }

    }
</script>
<style scoped lang="less">
    .mt10 {
        margin-top: 10px;
    }

    .tc {
        text-align: center
    }

    .header-sum-card {
        font-family: 幼圆;

        span.num {
            font-size: 30px;
        }

    }
</style>
